<template>
	<div class="step1">
		<p>Enter Your Name</p>
		<input type="text" class="name" v-model="name" />
		<span class='subm' @click='smt'>确认</span>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: ''
			}
		},
		methods: {
			smt() {
				if(this.name.length > 3 || this.name.length < 1) {
					layer.alert('请正确输入姓名，不超过3个字!');
					return;
				}
				$.ajax({
					url: main + '/addUser',
					type: 'post',
					dataType: 'json',
					data: {
						name:this.name
					},
					success:(dt)=>{
						console.log(dt);
//						return;
						if(dt.flag) {
							//成功
							layer.msg('添加成功');
							this.$store.commit('change',{key:'name',value:this.name});
							setTimeout(()=>{
								this.$router.push('/join');
							},1000)
							
						} else {
							layer.msg(dt.msg);
						}
					}
				})
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
	@import '../assets/scss/reset';
	.step1 {
		width: 100%;
		text-align: center;
		@include trant;
		p {
			font-size: 56px/$ppr;
			color: #a19db3;
			text-align: center;
			margin-bottom: 40px/$ppr;
			text-shadow: 1px 1px 3px #a19db3;
		}
		input {
			width: 80%;
			height: 100px/$ppr;
			line-height: 100px/$ppr;
			border: none;
			border-bottom: 1px solid #fff;
			background: transparent;
			font-size: 40px/$ppr;
			color: #fff;
			padding: 5px/$ppr 10px/$ppr;
			letter-spacing: 2px;
			text-align: center;
		}
		span.subm {
			display: block;
			margin: 40px/$ppr auto 0;
			width: 200px/$ppr;
			height: 80px/$ppr;
			background: #b2a5e8;
			border-radius: 20px/$ppr;
			text-align: center;
			line-height: 80px/$ppr;
			color: #fff;
			font-size: 32px/$ppr;
			border: 4px/$ppr solid rgba(148, 76, 247, 0.61);
			letter-spacing: 6px/$ppr;
		}
	}
</style>